@config.main("Proteomics") {
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Proteomics")

            <div class="main-body">

                @components.navUlComponents(
                    Seq(("geneId", "Search By Gene ID", searchForm("Gene ID", "ids", "geneIdForm")),
                        ("protein", "Search By Protein", textForm("Protein", "ids", "proteinForm")),
                        ("geneName", "Search By Gene Name", textForm("Gene Name", "ids", "geneNameForm")),
                    ), "geneId")


                <div id="result" class="result">
                    <hr/>

                    <h5>Result:</h5>

                    @components.scrollComponents("Expression level heatmap of gene cluster") {
                        <div id="heatmap" style="width: 100%;
                            margin: 0 auto"></div>
                    }

                    @components.scrollComponents("Linechart of  genes") {
                        <div id="line" style="width: 100%;
                            margin: 0 auto"></div>
                    }

                    @components.scrollComponents("Expression values of  genes") {
                        <div style="width: 100%;">

                        <table class="table table-hover" id="table" data-pagination="true"
                        data-page-list="[10]">

                        </table>
                        </div>

                    }


                </div>
            </div>
        </div>
    </div>
    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("config/bootstrap3-typeahead.min.js")" type="text/javascript"></script>

    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts-more.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/exporting.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/data.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/heatmap.js")" type ="text/javascript"></script>
    <script>

            let exGeneID = ""

            $(function () {
                GetTypeHead()
                formValidation()

            })

            function getEg(name) {

                if (name === "geneIdForm") {
                    let eg = "MS.gene02255.t1,MS.gene48151.t1,MS.gene002296.t1,MS.gene037807.t1,MS.gene22245.t1,MS.gene036196.t1,MS.gene063014.t1,MS.gene019910.t1,MS.gene030372.t1,MS.gene63840.t1"
                    $(`#${name}ids`).val(eg)
                } else if (name === "proteinForm") {
                    $(`#proteinFormids`).val("Q9ZNS4")
                } else {
                    $("#geneNameFormids").val("PRB1")
                }
            }

            function GetTypeHead() {
                $.post("@routes.ProteomicsController.getTypeHead()", (data) => {
                    addTypeHead("geneIdFormids", data.geneid)
                    addTypeHead("proteinFormids", data.protein)
                    addTypeHead("geneNameFormids", data.geneName)

                })
            }

            function addTypeHead(id, data) {
                $('#' + id).typeahead({
                    source: data,
                    updater: function (item) {
                        return this.$element.val().replace(/[^,]*$/, '') + item + ',';
                    },
                    matcher: function (item) {
                        var tquery = extractor(this.query);
                        if (!tquery) return false;
                        return ~item.toLowerCase().indexOf(tquery.toLowerCase())
                    },
                    highlighter: function (item) {
                        var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
                        return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                            return '<strong>' + match + '</strong>'
                        })
                    }
                })
            }

            function extractor(query) {
                var result = /([^,]+)$/.exec(query);
                if (result && result[1])
                    return result[1].trim();
                return '';
            }


            function Search(formId) {
                let form = $("#" + formId)
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();
                    $.ajax({
                        url: "/alfalfa/proteomics/getGeneExprData?formId=" + formId,
                        type: "post",
                        data: form.serialize(),
                        success: (data) => {
                            $("#table").bootstrapTable("destroy");
                            let columns = []
                            $.each(data.header, (i, v) => {
                                columns.push({
                                    field: `${i}`,
                                    title: v,
                                    sortable: true
                                })

                            })


                            $("#table").bootstrapTable({
                                data: data.table,
                                columns: columns
                            });

                            heatmap(data.heatmap)
                            plotLine(data.line)
                            let $result = $("#result")
                            $result.show();
                            layer.close(index)
                            let target_top = $result.offset().top ;
                            $("html,body").animate({scrollTop: target_top}, 800);
                        }
                    })
                }
            }

            function formValidation() {
                let queryText = {
                    validators: {
                        notEmpty: {
                            message: 'This is not be empty!'
                        }
                    }
                }

                $('#geneIdForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        ids: queryText
                    }
                });

                $('#proteinForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        ids: queryText
                    }
                });
                $('#geneNameForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        ids: queryText
                    }
                });

            }

            function heatmap(data) {
                Highcharts.chart('heatmap', {
                    credits: {
                        enabled: false
                    },
                    data: {
                        csv: data.csv,
                    },
                    exporting: {
                        sourceWidth:1400,
                        buttons: {
                          contextButton: {
                                menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
                            }
                        }
                    },
                    chart: {
                        type: 'heatmap',
                       height: 800,
                         margin: [60, 10, 250, 150],
                        zoomType: 'xy'
                    },
                    title: {
                        text: "Expression level heatmap of gene cluster"
                    },
                    xAxis: {
                        categories: data.xAxis,
                        //  startOnTick: true,
                        labels: {
                            align: 'right',
                            rotation: -90,
                            style: {
                                fontSize: '12px',
                                fontFamily: 'Arial, sans-serif'
                            }
                        }
                    },
                    yAxis: {
                        categories: data.yAxis,
                        title: "Gene",
                        endOnTick: false,
                        gridLineWidth: 0,
                        minorGridLineWidth: 0,
                        // showLastLabel:true
                    },
                    colorAxis: {
                        stops: [
                            [0.1, '#355F8D  '],
                            [0.5, '#2CA981'],
                            [1, '#F1E628']
                        ],
                        /*            min: data.min,
                                    max: data.max,*/
                    },
                    legend: {
                        title: {
                            style: {
                                fontWeight: '1',
                                color: '#555',
                                fontSize: '12px'
                            },
                            text: 'Expression(log2(TPM+1))'
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + data.xAxis[this.point.x] + '</b><br/>' + '<b>Gene:</b>' +
                                    data.yAxis[this.point.y] + '<br><b>Expression(log2(TPM+1)): ' + this.point.value + '</b> '
                                     ;
                        }
                    },
                    series: [{
                        borderWidth: 1,
                        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
                    }]
                });
            }

            function plotLine(data) {
                Highcharts.chart('line', {
                    title: {
                        text: 'Linechart of  genes'
                    },
                    credits: {
                        enabled: false
                    },
                    exporting: {
                        sourceWidth:1400,
                        buttons: {
                            contextButton: {
                                menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
                            }
                        }
                    },
                    xAxis: {
                        categories: data.xAxis,
                        //  startOnTick: true,
                        labels: {
                            align: 'right',
                            rotation: -90,
                            style: {
                                fontSize: '12px',
                                fontFamily: 'Arial, sans-serif'
                            }
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Expression'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },
                    plotOptions: {
                        series: {
                            label: {
                                connectorAllowed: false
                            }

                        }
                    },
                    tooltip: {
                        shared: true,
                        crosshairs: true,

                    },
                    series: data.series,
                    responsive: {
                        rules: [{
                            condition: {
                                maxWidth: 500
                            },
                            chartOptions: {
                                legend: {
                                    layout: 'horizontal',
                                    align: 'center',
                                    verticalAlign: 'bottom'
                                }
                            }
                        }]
                    }
                });
            }
    </script>
}

@searchForm(title: String, name: String, formId: String) = {
    <form class="registration-form col-sm-12 my-form" id="@formId">


        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-2 my-position-title">@title :</label>
            <div class="col-sm-9">
                <textarea class="form-control" type="text" rows="5" name="@name" id="@{
                    formId + name
                }"></textarea>
                <span  >
                    e.g.,&nbsp;<a href="####" onclick="getEg('@formId')"><em class="egCrics">Example</em></a></span>
            </div>
        </div>

        @components.button(formId)
    </form>
}

@textForm(title: String, name: String, formId: String) = {
    <form class="registration-form col-sm-12 my-form" id="@formId">


        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-2 my-position-title">@title :</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" type="text" rows="5" name="@name" id="@{
                    formId + name
                }" />
                <span  >
                    e.g.,&nbsp;<a href="####" onclick="getEg('@formId')"><em class="egCrics">Example</em></a></span>
            </div>
        </div>

        @components.button(formId)
    </form>
}

